<template>
  <div>
    <!-- 查询工具栏 -->
    <el-row :gutter="20" class="toolbar" style="margin-bottom: 20px;">
      <el-col :span="6">
        <div class="input-group">
          <label class="input-label">
            <i class="el-icon-s-finance"></i> 选择股票数据
          </label>
          <el-select
              v-model="selectedStock"
              placeholder="支持模糊搜索股票代码或名称"
              style="width: 100%"
              filterable
              remote
              clearable
              reserve-keyword
              :remote-method="searchStocks"
              :loading="stockLoading"
              @change="onStockChange"
          >
            <el-option
                v-for="item in stockOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
      </el-col>

      <el-col :span="5">
        <div class="input-group">
          <label class="input-label">
            <i class="el-icon-date"></i> 开始时间
          </label>
          <el-date-picker
              v-model="startDate"
              type="date"
              placeholder="选择开始日期"
              style="width: 100%"
              :picker-options="startPickerOptions"
          ></el-date-picker>
        </div>
      </el-col>

      <el-col :span="5">
        <div class="input-group">
          <label class="input-label">
            <i class="el-icon-date"></i> 结束时间
          </label>
          <el-date-picker
              v-model="endDate"
              type="date"
              placeholder="选择结束日期"
              style="width: 100%"
              :picker-options="endPickerOptions"
          ></el-date-picker>
        </div>
      </el-col>

      <el-col :span="4">
        <div class="input-group" style="padding-top: 28px;">
          <el-button type="primary" @click="fetchRiskData" style="width: 100%;">
            <i class="el-icon-search"></i> 查询
          </el-button>
        </div>
      </el-col>
    </el-row>

    <div ref="chartRef" style="width: 100%; height: 500px; margin-top: 20px;"></div>

    <!-- 预测统计信息 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 第1天预测 - 增强版 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" style="background-color: #C8102E; color: white; margin: -20px; padding: 10px; font-weight: bold;">
            📊 第1天预测分析
          </div>
          <div style="padding: 10px 0;">
            <el-row :gutter="10">
              <el-col :span="12">
                <div style="text-align: center;">
                  <div style="color: #909399; font-size: 14px; margin-bottom: 5px;">预测价格</div>
                  <div style="color: #C8102E; font-size: 24px; font-weight: bold;">{{ yesterdayPrice }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div style="text-align: center;">
                  <div style="color: #909399; font-size: 14px; margin-bottom: 5px;">预测精度</div>
                  <div style="color: #67C23A; font-size: 24px; font-weight: bold;">{{ accuracy }}</div>
                </div>
              </el-col>
            </el-row>
            
            <el-divider></el-divider>
            
            <!-- 文本证据 -->
            <div style="margin-bottom: 15px;">
              <div style="color: #303133; font-weight: bold; margin-bottom: 8px;">
                <i class="el-icon-document"></i> 文本证据
              </div>
              <div style="background-color: #F5F7FA; padding: 10px; border-radius: 4px; font-size: 13px; line-height: 1.6;">
                {{ textEvidence }}
              </div>
            </div>
            
            <!-- 预测影响 -->
            <div>
              <div style="color: #303133; font-weight: bold; margin-bottom: 8px;">
                <i class="el-icon-data-analysis"></i> 对预测的影响
              </div>
              <div style="display: flex; align-items: center;">
                <el-tag :type="predictionImpact.type" effect="dark" size="medium">
                  {{ predictionImpact.label }}
                </el-tag>
                <span style="margin-left: 10px; color: #606266; font-size: 13px;">
                  {{ predictionImpact.description }}
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 其他预测天数 -->
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header" style="background-color: #C8102E; color: white; margin: -20px; padding: 10px; font-weight: bold;">
            📈 多日预测概览
          </div>
          <div style="padding: 10px 0;">
            <el-row :gutter="10" style="margin-bottom: 15px;">
              <el-col :span="12">
                <div style="text-align: center; padding: 15px; background-color: #F5F7FA; border-radius: 4px;">
                  <div style="color: #909399; font-size: 14px; margin-bottom: 5px;">第2天预测</div>
                  <div style="color: #C8102E; font-size: 20px; font-weight: bold;">{{ todayPrice }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div style="text-align: center; padding: 15px; background-color: #F5F7FA; border-radius: 4px;">
                  <div style="color: #909399; font-size: 14px; margin-bottom: 5px;">第3天预测</div>
                  <div style="color: #C8102E; font-size: 20px; font-weight: bold;">{{ tomorrowPrice }}</div>
                </div>
              </el-col>
            </el-row>
            
            <el-divider></el-divider>
            
            <div style="text-align: center; color: #909399; font-size: 13px;">
              <i class="el-icon-info"></i> 基于深度学习时间序列模型的多步预测结果
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 文本信息区域 -->
    <div class="news-section" style="margin-top: 30px;">
      <el-card>
        <div slot="header" class="clearfix">
          <span style="font-weight: bold; font-size: 16px;">📰 文本信息</span>
          <el-button 
            style="float: right; padding: 3px 10px" 
            type="text" 
            @click="fetchStockNews"
            :loading="newsLoading"
          >
            刷新
          </el-button>
        </div>
        
        <div v-if="newsLoading" style="text-align: center; padding: 40px;">
          <i class="el-icon-loading" style="font-size: 24px;"></i>
          <p style="margin-top: 10px;">加载新闻中...</p>
        </div>
        
        <div v-else-if="newsList.length === 0" style="text-align: center; padding: 40px; color: #909399;">
          <i class="el-icon-document" style="font-size: 48px;"></i>
          <p style="margin-top: 10px;">暂无新闻数据</p>
        </div>
        
        <el-timeline v-else>
          <el-timeline-item 
            v-for="(news, index) in displayedNews" 
            :key="index"
            :timestamp="news['发布时间'] || news.pub_time" 
            placement="top"
          >
            <el-card shadow="hover">
              <h4 style="margin: 0 0 10px 0;">
                <a :href="news['新闻链接'] || news.url" target="_blank" style="color: #303133; text-decoration: none;">
                  {{ news['新闻标题'] || news.title }}
                </a>
              </h4>
              <p style="color: #606266; font-size: 14px; line-height: 1.6; margin: 10px 0;">
                {{ news['新闻内容'] || news.content }}
              </p>
              <div style="margin-top: 10px; font-size: 12px; color: #909399;">
                <span>📅 {{ news['发布时间'] || news.pub_time }}</span>
                <span style="margin-left: 15px;">📰 来源: {{ news['文章来源'] || news.source || '-' }}</span>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        
        <div v-if="newsList.length > newsDisplayLimit" style="text-align: center; margin-top: 20px;">
          <el-button 
            type="primary" 
            plain 
            @click="loadMoreNews"
            v-if="newsDisplayLimit < newsList.length"
          >
            加载更多 ({{ newsList.length - newsDisplayLimit }} 条)
          </el-button>
          <el-button 
            type="text" 
            @click="newsDisplayLimit = 10"
            v-else
          >
            收起
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import http from '../utils/request';
import * as echarts from 'echarts';

export default {
  name: 'StockRiskPage',
  data() {
    const today = new Date();
    const oneYearAgo = new Date(today);
    oneYearAgo.setFullYear(today.getFullYear() - 1);

    return {
      selectedStock: '',
      stockSymbol: '',
      stockOptions: [],
      stockLoading: false,

      startDate: null,
      endDate: null,
      yesterdayPrice: '-',
      todayPrice: '-',
      tomorrowPrice: '-',
      accuracy: '-',
      chartInstance: null,
      today,
      oneYearAgo,
      
      // 文本证据和影响分析
      textEvidence: '暂无文本证据',
      predictionImpact: {
        type: 'info',
        label: '中性',
        description: '等待数据加载'
      },
      
      // 预测数据 (用于判断趋势)
      predictionData: [],  // 存储完整的预测数据
      
      // 新闻相关
      newsList: [],
      newsLoading: false,
      newsDisplayLimit: 10,
      startPickerOptions: {
        disabledDate: (time) => {
          return time < this.oneYearAgo || time > this.today;
        }
      },
      endPickerOptions: {
        disabledDate: (time) => {
          const maxFuture = new Date(this.today);
          maxFuture.setDate(maxFuture.getDate() + 21);
          return time < this.startDate || time > maxFuture;
        }
      }
    };
  },
  computed: {
    displayedNews() {
      return this.newsList.slice(0, this.newsDisplayLimit);
    }
  },
  mounted() {
    this.chartInstance = echarts.init(this.$refs.chartRef);
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chartInstance) {
      this.chartInstance.dispose();
      this.chartInstance = null;
    }
  },
  methods: {
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
    // 模糊搜索股票
    async searchStocks(query) {
      this.stockLoading = true;

      const params = query
          ? { query }
          : { page: 1, page_size: 500 }; // 空输入显示全部

      try {
        const response = await http.get('/api/stock_base/', { params });
        const data = response.data.results || [];
        this.stockOptions = data.map(item => ({
          value: item.symbol,
          label: item.symbol + ' ' + item.name
        }));
      } catch (err) {
        console.error(err);
        this.$message.error('股票搜索失败');
      } finally {
        this.stockLoading = false;
      }
    },

    onStockChange(value) {
      this.stockSymbol = value;
      // 不自动加载新闻,等待查询按钮点击后再加载
    },

    // 获取股票新闻
    async fetchStockNews() {
      if (!this.stockSymbol) {
        this.$message.warning('请先选择股票');
        return;
      }
      
      this.newsLoading = true;
      this.newsList = [];
      
      try {
        // 从股票代码中提取纯数字部分 (sh600519 -> 600519)
        const stockCode = this.stockSymbol.replace(/[a-zA-Z]/g, '');
        
        console.log('准备获取新闻, 股票代码:', stockCode);
        console.log('完整请求URL:', '/api/stock_news/?stock_code=' + stockCode);
        
        const response = await http.get('/api/stock_news/', {
          params: { 
            stock_code: stockCode,
            limit: 100
          }
        });
        
        console.log('=== 新闻接口响应 ===');
        console.log('完整响应:', response);
        console.log('响应数据:', response.data);
        console.log('响应类型:', typeof response.data);
        console.log('是否为数组:', Array.isArray(response.data));
        
        if (response.data) {
          // 检查多种可能的数据结构
          if (response.data.news && Array.isArray(response.data.news)) {
            console.log('找到 news 字段, 数量:', response.data.news.length);
            this.newsList = response.data.news;
          } else if (response.data.data && Array.isArray(response.data.data)) {
            console.log('找到 data 字段, 数量:', response.data.data.length);
            this.newsList = response.data.data;
          } else if (Array.isArray(response.data)) {
            console.log('直接是数组, 数量:', response.data.length);
            this.newsList = response.data;
          } else {
            console.log('未知的数据格式:', Object.keys(response.data));
            console.log('第一层数据:', response.data);
            this.$message.warning('数据格式不匹配,请查看控制台');
          }
          
          if (this.newsList.length > 0) {
            console.log('第一条新闻示例:', this.newsList[0]);
            // 静默加载,不显示成功提示
            
            // 分析文本证据和影响
            this.analyzeTextEvidence();
          } else {
            console.warn('新闻列表为空');
            // 静默处理,不显示警告
            this.textEvidence = '暂无相关新闻数据';
            this.predictionImpact = {
              type: 'info',
              label: '无数据',
              description: '暂无文本信息可供分析'
            };
          }
        } else {
          console.error('response.data 为空');
          this.$message.warning('响应数据为空');
        }
      } catch (err) {
        console.error('=== 获取新闻失败 ===');
        console.error('错误对象:', err);
        console.error('错误响应:', err.response);
        console.error('错误信息:', err.message);
        this.$message.error('获取新闻失败: ' + (err.response?.data?.message || err.message));
      } finally {
        this.newsLoading = false;
      }
    },

    // 分析文本证据和对预测的影响 (基于预测趋势)
    analyzeTextEvidence() {
      if (!this.newsList || this.newsList.length === 0) {
        this.textEvidence = '暂无文本证据';
        this.predictionImpact = {
          type: 'info',
          label: '无数据',
          description: '暂无文本信息可供分析'
        };
        return;
      }
      
      if (!this.predictionData || this.predictionData.length < 3) {
        this.textEvidence = '暂无预测数据';
        this.predictionImpact = {
          type: 'info',
          label: '无数据',
          description: '预测数据不足,无法分析'
        };
        return;
      }
      
      // 获取第一条新闻作为文本证据
      const latestNews = this.newsList[0];
      const newsTitle = latestNews['新闻标题'] || latestNews.title || '无标题';
      const newsTime = latestNews['发布时间'] || latestNews.pub_time || '';
      
      // 设置文本证据
      this.textEvidence = `${newsTitle} (${newsTime})`;
      
      // ===== 核心逻辑: 根据预测数据的趋势判断文本影响 =====
      
      // 获取前3天的预测价格
      const day1Close = this.predictionData[0].close;  // 第1天
      const day2Close = this.predictionData[1].close;  // 第2天
      const day3Close = this.predictionData[2].close;  // 第3天
      
      // 计算价格变化
      const totalChange = day3Close - day1Close;  // 总体变化
      
      // 计算涨跌幅
      const totalChangePercent = (totalChange / day1Close) * 100;
      
      console.log('预测趋势分析:', {
        第1天收盘: day1Close.toFixed(2),
        第2天收盘: day2Close.toFixed(2),
        第3天收盘: day3Close.toFixed(2),
        总体变化: totalChange.toFixed(2),
        总体涨跌幅: totalChangePercent.toFixed(2) + '%'
      });
      
      // 根据预测趋势判断文本影响
      if (totalChangePercent >= 2.0) {
        // 预测显示明显上涨趋势 (>= 2%)
        this.predictionImpact = {
          type: 'success',
          label: '正面影响',
          description: `文本信息对预测产生正面影响`
        };
      } else if (totalChangePercent >= 0.5) {
        // 预测显示小幅上涨 (0.5% ~ 2%)
        this.predictionImpact = {
          type: 'success',
          label: '偏正面影响',
          description: `文本信息对预测产生偏正面影响`
        };
      } else if (totalChangePercent <= -2.0) {
        // 预测显示明显下跌趋势 (<= -2%)
        this.predictionImpact = {
          type: 'danger',
          label: '负面影响',
          description: `文本信息对预测产生负面影响`
        };
      } else if (totalChangePercent <= -0.5) {
        // 预测显示小幅下跌 (-2% ~ -0.5%)
        this.predictionImpact = {
          type: 'danger',
          label: '偏负面影响',
          description: `文本信息对预测产生偏负面影响`
        };
      } else {
        // 预测显示震荡 (-0.5% ~ 0.5%)
        this.predictionImpact = {
          type: 'warning',
          label: '混合影响',
          description: `文本信息对预测产生混合影响`
        };
      }
      
      console.log('文本证据分析完成:', {
        evidence: this.textEvidence,
        impact: this.predictionImpact,
        预测趋势: totalChangePercent.toFixed(2) + '%'
      });
    },

    // 加载更多新闻
    loadMoreNews() {
      this.newsDisplayLimit += 10;
    },

    fetchRiskData() {
      if (!this.stockSymbol) {
        this.$message.warning('请选择股票');
        return;
      }
      if (!this.startDate || !this.endDate) {
        this.$message.warning('请选择开始和结束时间');
        return;
      }

      http.post('/api/predict/', {
        stock_code: this.stockSymbol,
        model_name: (this.$route && this.$route.meta && this.$route.meta.model) ? this.$route.meta.model : 'TimesNet'
      })
          .then(res => {
            console.log('后端返回的完整数据:', res);
            console.log('res.data:', res.data);
            
            const predictions = res.data.predictions || [];
            
            console.log('预测数据条数:', predictions.length);
            
            if (predictions.length > 0) {
              console.log('预测数据第一条的所有字段:', Object.keys(predictions[0]));
              console.log('预测数据第一条完整内容:', predictions[0]);
            }
            
            if (predictions.length === 0) {
              this.$message.warning('未获取到预测数据,请检查股票代码');
              return;
            }
            
            // 保存预测数据供后续分析使用
            this.predictionData = predictions;
            
            // 提取预测数据
            const dates = predictions.map(d => d.date);
            const openPrices = predictions.map(d => d.open);
            const closePrices = predictions.map(d => d.close);
            const highPrices = predictions.map(d => d.high);
            const lowPrices = predictions.map(d => d.low);
            const volumes = predictions.map(d => d.volume);
            
            console.log('日期示例:', dates.slice(0, 3));
            console.log('收盘价示例:', closePrices.slice(0, 3));
            
            // 准备K线图数据 [open, close, low, high]
            const candlestickData = predictions.map(d => [d.open, d.close, d.low, d.high]);
            
            // 更新统计信息 (预测数据)
            if (closePrices.length >= 3) {
              this.yesterdayPrice = '¥' + Number(closePrices[0]).toFixed(2);
              this.todayPrice = '¥' + Number(closePrices[1]).toFixed(2);
              this.tomorrowPrice = '¥' + Number(closePrices[2]).toFixed(2);
            } else if (closePrices.length >= 1) {
              this.yesterdayPrice = '-';
              this.todayPrice = '¥' + Number(closePrices[0]).toFixed(2);
              this.tomorrowPrice = closePrices.length > 1 ? '¥' + Number(closePrices[1]).toFixed(2) : '-';
            }
            
            // 计算预测精度(如果后端返回)
            this.accuracy = res.data.accuracy ? Number(res.data.accuracy).toFixed(2) + '%' : '-';

            // 计算成交量的缩放比例
            const maxVolume = Math.max(...volumes);
            const volumeData = volumes.map((vol, idx) => ({
              value: vol,
              itemStyle: {
                color: closePrices[idx] >= openPrices[idx] ? '#ef5350' : '#26a69a'
              }
            }));

            // 绘制图表
            this.chartInstance.setOption({
              title: { 
                text: '股票数据集可视化验证',
                left: 'center',
                textStyle: {
                  fontSize: 18,
                  fontWeight: 'bold',
                  color: '#C8102E'  // 华东师范大学红色
                }
              },
              tooltip: { 
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                },
                formatter: function(params) {
                  if (!params || params.length === 0) return '';
                  
                  const dataIndex = params[0].dataIndex;
                  const date = dates[dataIndex];
                  const open = openPrices[dataIndex];
                  const close = closePrices[dataIndex];
                  const high = highPrices[dataIndex];
                  const low = lowPrices[dataIndex];
                  const volume = volumes[dataIndex];
                  
                  // 日期格式化
                  const dateStr = date.length === 8 
                    ? date.substring(0, 4) + '-' + date.substring(4, 6) + '-' + date.substring(6, 8)
                    : date;
                  
                  const change = close - open;
                  const changePercent = ((change / open) * 100).toFixed(2);
                  const changeColor = change >= 0 ? '#ef5350' : '#26a69a';
                  
                  return `
                    <div style="padding: 8px;">
                      <div style="font-weight: bold; margin-bottom: 8px;">${dateStr}</div>
                      <div>开盘: ¥${Number(open).toFixed(2)}</div>
                      <div>收盘: ¥${Number(close).toFixed(2)}</div>
                      <div>最高: ¥${Number(high).toFixed(2)}</div>
                      <div>最低: ¥${Number(low).toFixed(2)}</div>
                      <div style="color: ${changeColor}">
                        涨跌: ${change >= 0 ? '+' : ''}¥${change.toFixed(2)} (${change >= 0 ? '+' : ''}${changePercent}%)
                      </div>
                      <div>成交量: ${(volume / 10000).toFixed(2)}万</div>
                    </div>
                  `;
                }
              },
              legend: {
                data: ['K线', '成交量'],
                top: '30px'
              },
              grid: [
                {
                  left: '10%',
                  right: '10%',
                  top: '70px',
                  height: '50%'
                },
                {
                  left: '10%',
                  right: '10%',
                  top: '68%',
                  height: '18%'
                }
              ],
              xAxis: [
                {
                  type: 'category',
                  data: dates,
                  boundaryGap: true,
                  axisLine: { lineStyle: { color: '#8392A5' } },
                  axisLabel: {
                    formatter: function(value) {
                      if (value && value.length === 8) {
                        return value.substring(4, 6) + '-' + value.substring(6, 8);
                      }
                      return value;
                    }
                  },
                  splitLine: { show: false },
                  gridIndex: 0
                },
                {
                  type: 'category',
                  data: dates,
                  gridIndex: 1,
                  axisLabel: { show: false },
                  axisLine: { lineStyle: { color: '#8392A5' } },
                  splitLine: { show: false }
                }
              ],
              yAxis: [
                {
                  scale: true,
                  name: '价格(¥)',
                  splitLine: { 
                    show: true,
                    lineStyle: {
                      color: '#E0E6F1',
                      type: 'dashed'
                    }
                  },
                  axisLabel: {
                    formatter: '¥{value}'
                  },
                  gridIndex: 0
                },
                {
                  scale: true,
                  name: '成交量',
                  splitLine: { show: false },
                  axisLabel: {
                    formatter: function(value) {
                      return (value / 10000).toFixed(0) + '万';
                    }
                  },
                  gridIndex: 1
                }
              ],
              dataZoom: [
                {
                  type: 'inside',
                  xAxisIndex: [0, 1],
                  start: 0,
                  end: 100
                },
                {
                  show: true,
                  xAxisIndex: [0, 1],
                  type: 'slider',
                  bottom: '5%',
                  start: 0,
                  end: 100,
                  height: 20
                }
              ],
              series: [
                {
                  name: 'K线',
                  type: 'candlestick',
                  data: candlestickData,
                  itemStyle: {
                    color: '#ef5350',        // 阳线颜色(涨)
                    color0: '#26a69a',       // 阴线颜色(跌)
                    borderColor: '#ef5350',  // 阳线边框
                    borderColor0: '#26a69a'  // 阴线边框
                  },
                  xAxisIndex: 0,
                  yAxisIndex: 0
                },
                {
                  name: '成交量',
                  type: 'bar',
                  data: volumeData,
                  xAxisIndex: 1,
                  yAxisIndex: 1,
                  barWidth: '60%'
                }
              ]
            });
          })
          .catch(err => {
            console.error('请求失败详情:', err);
            console.error('错误响应:', err.response);
            if (err.response) {
              this.$message.error(`获取股票数据失败: ${err.response.status} - ${err.response.data?.message || err.response.statusText}`);
            } else if (err.request) {
              this.$message.error('网络请求失败,请检查网络连接');
            } else {
              this.$message.error('获取股票数据失败: ' + err.message);
            }
          })
          .finally(() => {
            // 预测数据加载完成后,再加载新闻
            this.$nextTick(() => {
              this.fetchStockNews();
            });
          });
    }
  }
};
</script>

<style scoped>
/* 华东师范大学配色方案 */
/* 主色: #C8102E (华师大红) */
/* 辅色: #FFFFFF (白色) */

.toolbar {
  margin-bottom: 10px;
}

.risk-summary {
  font-size: 16px;
  font-weight: bold;
}

/* 输入框组样式 */
.input-group {
  margin-bottom: 0;
}

.input-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
}

.input-label i {
  color: #C8102E;
  margin-right: 4px;
}

/* 按钮主题色 */
::v-deep .el-button--primary {
  background-color: #C8102E;
  border-color: #C8102E;
}

::v-deep .el-button--primary:hover,
::v-deep .el-button--primary:focus {
  background-color: #A00D26;
  border-color: #A00D26;
}

/* 卡片标题栏 */
::v-deep .el-card__header {
  background-color: #C8102E;
  color: #FFFFFF;
  font-weight: bold;
}

/* 统计卡片数值高亮 */
::v-deep .el-statistic__content {
  color: #C8102E;
}

/* 时间轴节点颜色 */
::v-deep .el-timeline-item__node {
  background-color: #C8102E;
}

/* 时间轴线条颜色 */
::v-deep .el-timeline-item__tail {
  border-left: 2px solid #C8102E;
}

/* 链接颜色 */
::v-deep a {
  color: #C8102E;
}

::v-deep a:hover {
  color: #A00D26;
}

/* 日期选择器选中状态 */
::v-deep .el-date-editor.el-input__inner:focus {
  border-color: #C8102E;
}

/* 下拉框选中项 */
::v-deep .el-select-dropdown__item.selected {
  color: #C8102E;
}

/* 加载图标颜色 */
::v-deep .el-icon-loading {
  color: #C8102E;
}
</style>
